<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
				margin: 30px;
			}
			#box{
				width: 300px;
				height: 200px;
				padding: 10px;
				margin: 0 auto;
				position: relative;
				background-color: skyblue;
				border-radius: 10px;
			}
			#box>div{
				margin: 20px;
			}
			button{
				position: absolute;
				right: 148px;
				background-color: darkred;
				color: white;
			}
			.ul{
				width: 500px;
				height: 200px;
				border: red 1px solid;
				margin: 0 auto;
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="user">
				姓名：<input type="text" name="" id="user" value="" />
			</div>
			<div class="sex">
				性别：
				<input type="radio" name="sex" id="man" value="1"/><label for="man">男</label>
				<input type="radio" name="sex" id="woman" value="2"/><label for="woman">女</label>
			</div>
			<!-- <div class="jd">
				阶段：
				<select name="">
					<option value="">p1</option>
					<option value="">p2</option>
					<option value="">p3</option>
				</select>
			</div> -->
			<button type="button" class="btn">提交</button>
		</div>
		<div class="ul">
			<ul>
				<!-- <li>姓名：</li>
				<li>性别：</li> -->
				<!-- <li>爱好：</li> -->
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var user = document.querySelector("#user")
		var sexs = document.querySelectorAll("#box>.sex>input[type='radio']")
		/* var jd = document.querySelector(".jd") */
		var nr = document.querySelectorAll(".ul>ul");
		var btn = document.querySelector(".btn")
		
		if (localStorage.aa) {
			var arr=JSON.parse(localStorage.aa);
			show(arr)
		} else{
			var arr = [];
			localStorage.aa = JSON.stringify(arr)
		}
		
		btn.onclick = function(){
			var obj={
				user:user.value,
				sex:getsexV(),
				id:+new Date()
			}
			arr.push(obj)
			localStorage.aa = JSON.stringify(arr);
			show(arr)
		}
		user.value=sexs.value='';
		
		/* 获取单选值 */
		function getsexV(){
			for(i=0;i<sexs.length;i++){
				if(sexs[i].checked){
					return sexs[i].value;
				}
			}
		}
		function getsexFn(value){
			return value==1?"男":"女"
		}
		// 渲染数据
		function show(arr){
			nr.innerHTML = "";
			for(i=0;i<arr.length;i++){
				nr.innerHTML+=`
				    <ul>
					   <li>姓名：${arr[i].user}</li>
					   <li>性别：${getsexFn(arr[i].sex)}</li>
					</ul>
				`;
			}
			// show(arr)
			localStorage.aa = JSON.stringify(arr)
		}
	</script>
</html>
